// 导入重置样式
require("../../assets/css/reset.css");
// 引入公共样式
require("../../assets/css/basic.css");
// 引入矢量图
require("../../assets/fonts/iconfont.css");
// 引入头部导航navbar
require("../../assets/css/navbar.less");
// 引入底部导航tabbar
require("../../assets/css/tabbar.less");
// 引入当前页面的样式
require("./exercising_course.less");

// 引入dom
const dom = require("../../utils/dom.js");
// 引入axios模块
const axios = require("../../utils/axios.js");
// 引入头部导航navbar
const navbar = require("../../utils/navbar.js");
// 引入底部导航tabbar
const tabbar = require("../../utils/tabbar.js");

window.addEventListener("DOMContentLoaded", () => {
    //渲染头部导航navbar
    navbar.navbar("exercising_course");
    // 渲染底部导航tabbar
    tabbar.tabbar("exercising_course");
    
    // 1.发请求拿课程数据
    axios.get("/api/train/courseList").then(res => {
        
        // 渲染最新课程
        let data = res.data.data.shift();
        dom.get(".new-course img").src = axios.defaults.baseURL + data.imgurl;
        dom.get(".new-course h5").textContent = data.name;
        dom.get(".new-course p").textContent = data.desc;
        //获取courseId实现动态网页
        dom.get(".new-course a").href = "exercising_course_datail.html?id=" + data.courseId;

        // 渲染课程
        let html = "";
        res.data.data.forEach(function(v){
            html += `
                <li>
                    <a href="exercising_course_datail.html?id=${v.courseId}">
                        <img src="${axios.defaults.baseURL + v.imgurl}" alt="">
                        <h5>${v.name}</h5>
                        <p>${v.desc}</p>
                    </a>
                </li>
            `;
        })
        dom.get(".course ul").innerHTML = html;
    })

})